<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Bandit-Blog后台</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <c:import url="${pageContext.request.contextPath}/WEB-INF/jsp/commons/backheader.jsp"></c:import>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <fieldset class="layui-elem-quote">评论管理</fieldset>
        <table class="layui-table"
               lay-data="{width:1600,page:true,url:'${pageContext.request.contextPath}/queryAllComment', id:'CommentTable',toolbar:'#toolbarComment',defaultToolbar : ['filter']}"
               lay-filter="CommentTable">
            <thead>
            <tr>
                <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                <th lay-data="{field:'id', sort: true, fixed: true}">ID</th>
                <th lay-data="{field:'name',fixed: true}">评论人</th>
                <th lay-data="{field:'email',fixed: true}">邮箱</th>
                <th lay-data="{field:'content',fixed: true}">评论内容</th>
                <th lay-data="{field:'commentDate',fixed: true}">评论日期</th>
                <th lay-data="{field:'blog_id',fixed: true}">相关博客id</th>
                <th lay-data="{field:'blogTitle',fixed: true}">相关博客标题</th>
                <th lay-data="{field:'blogSummary',fixed: true}">相关博客标题</th>
                <th lay-data="{fixed: 'right', title:'操作', toolbar: '#barComment', width:200}">操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<script>
    //JS
    layui.use(['element', 'layer', 'util','table'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,table = layui.table
            ,$ = layui.$;

        //toolBar
        table.on('tool(CommentTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data;        //获得当前行数据
            var layEvent = obj.event;   //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr;            //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'del'){ //删除
                layer.confirm('确定要删除吗', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url:"${pageContext.request.contextPath}/DeleteComment",
                        data:{
                            "id":data.id,
                            "blog_id":data.blog_id
                        }
                    })
                });
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
        var $ = layui.$, active = {
            reload: function(){
                var CommentIDReload = $('#CommentIDReload');
                //执行重载
                table.reload('CommentTable', {
                    url:'${pageContext.request.contextPath}/queryCommentByID'  //ID获取
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {       //where为向后台传的值
                        id:CommentIDReload.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }

        });
    });
</script>
</body>
</html>
